import React, { memo } from "react";
import { useSelector, shallowEqual, useDispatch } from "react-redux";

import { getSizeImage, formatMinuteSecond } from "@/utils/format-utils.js";
import { changeCurrentSongAction } from "@/pages/player/store/actionCreator";
import ThemeHeaderSong from "@/components/theme-header-song";
import { RankingListWrapper } from "./style";

export default memo(function HYRankingList() {
  const state = useSelector(
    (state) => ({
      playList: state.getIn(["ranking", "playListDetail"]),
    }),
    shallowEqual
  );
  const dispatch = useDispatch();
  const tracks = state.playList.tracks || [];
  //播放歌曲
  const playMusic = (item) => {
    dispatch(changeCurrentSongAction(item.id));
  };
  return (
    <RankingListWrapper>
      <ThemeHeaderSong />
      <div className="play-list">
        <table>
          <thead>
            <tr className="header">
              <th className="ranking"></th>
              <th className="title">标题</th>
              <th className="duration">时长</th>
              <th className="singer">歌手</th>
            </tr>
          </thead>
          <tbody>
            {tracks.map((item, index) => {
              return (
                <tr className="" key={item.id}>
                  <td>
                    <div className="rank-num">
                      <span className="num">{index + 1}</span>
                      <span className="new sprite_icon2"></span>
                    </div>
                  </td>
                  <td>
                    <div className="song-name">
                      {index < 3 ? (
                        <img src={getSizeImage(item.al.picUrl, 50)} alt="" />
                      ) : null}
                      <span
                        className="play sprite_table"
                        onClick={(e) => playMusic(item)}
                      ></span>
                      <span className="name">{item.name}</span>
                    </div>
                  </td>
                  <td>{formatMinuteSecond(item.dt)}</td>
                  <td>{item.ar[0].name}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </RankingListWrapper>
  );
});
